<template>
  <f7-page
    @page:reinit="getDataItems"
    infinite
    :infinite-distance="10"
    :infinite-preloader="showPreloader"
    @infinite="loadMore"
  >
    <f7-navbar title="我的流程" back-link="Back"></f7-navbar>
    <f7-list media-list>
      <f7-list-item v-for="(item) in tt" v-bind:key="item.id"
                    v-bind:title="item.title"
                    v-bind:subtitle="item.name"
                    v-bind:text="item.startTime"
                    v-bind:after="item.status"
                    v-bind:link="'/oa/' + item.businessKey.split(':')[0] + '/' + item.entityId"></f7-list-item>
    </f7-list>
  </f7-page>
</template>

<script>

export default {
  data () {
    return {
      tt: [],
      pool:[],
      allowInfinite: true,
      showPreloader: false,
    }
  },
  created () {
    this.$f7ready((f7) => {
      let that = this;
      f7.request.setup({
        headers: {
          'AccessToken': sessionStorage.getItem('accessToken'),
          'JSESSIONID': sessionStorage.getItem('userToken')
        }
      });
      f7.request.json(that.GLOBAL.RequestAddress + '/camel/rest/workflow/myHistory', {'page': 1, 'limit': 10, 'jsonStr': '', 'start':0}, function (result) {
        if (result.totalCount >-1) {
          that.tt = result.data;
          if(that.tt.length < 10) {
            that.showPreloader = false;
          }
        }
      });
    });
  },
  watch: {
    tt: {
      handler() {
      },
      deep: true
    }
  },
  methods: {
    getDataItems: function(){
      console.log("init")
      let that = this;
      let app  = that.$f7;
      app.request.json(this.GLOBAL.RequestAddress + '/camel/rest/workflow/myHistory', {'page': 1, 'limit': 10, 'jsonStr': '', 'start':0}, function (result) {
        if (result.totalCount >=0) {
          that.tt = result.data;
          if(that.tt.length < 10) {
            that.showPreloader = false;
          }
        }
      })
    },
    showAlert: function (title, text) {
      let app = this.$7;
      app.dialog.alert(text, title, () => {
        //this.$f7router.back();
      });
    },
    loadMore() {
      const self = this;
      const app  = self.$f7;
      const length = self.tt.length;

      if (!self.allowInfinite ) return;
      self.allowInfinite = false;

      setTimeout(() => {

        if (length >= 200 ||  length % 10 != 0 ) {
          self.showPreloader = false;
          return;
        }

        app.request.json(this.GLOBAL.RequestAddress + '/camel/rest/workflow/myHistory', {'start':length, 'page':  Math.ceil(length/10 + 1), 'limit': 10, 'jsonStr': ''}, function (result) {
          if (result.totalCount >0) {
            self.pool = result.data;
            self.tt = [...self.tt, ...self.pool];
          }
          self.allowInfinite = true;
        })
      }, 1000);
    },
  },
}
</script>

